<template>
  <div class="content">
    <dc-header :title="this.$route.params.title" :page-to="'/inform'"></dc-header>

      <div  class="head-top">
        <div v-for="inform in informs">
          <mt-badge class="timeline mt20" size="small" color="#d9d9d9">{{inform.receiveTime}}</mt-badge>

          <div class="bg-white info-content">
            <div class="info-header">
              <i class="iconfont" :class="icon" :style="{color: informColor}"></i>
              <span class="info-inner">
              {{inform.msgTitle}}
            </span>
            </div>
            <div class="info-text" v-html="inform.msgContent"></div>
            <div v-if="inform.linkType=='1'" class="info-footer" @click="checkDetail(inform.linkType, inform.msgId)">
              点击查看详情
            </div>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
  import header from '@/components/header';
  import footer from '@/components/footer';
  import api from '@/common/api/inform';
  import constant from '@/common/constant';
  /**
   * @namespace  components/Test
   * @author ashen
   */
  export default {
    components: {
      'dc-header': header,
      'dc-footer': footer
    },
    data () {
      return {
        title: '',
        informs: [],
        icon: ''
      };
    },
    created () {
      let param = {
        msgTypeCode: this.$route.params.type
      };
      if (this.$route.params.type === 'M120010') {
        this.icon = 'icon-inform-morning';
        this.informColor = '#60c3d2';
      } else if (this.$route.params.type === 'M120011') {
        this.icon = 'icon-mes-danger';
        this.informColor = '#f15b59';
      } else {
        this.icon = 'icon-inform-system';
        this.informColor = '#8d8be7';
      }
      let paramer = Object.assign(param, constant.pager);
      api.informs(paramer).then(res => {
        this.informs = res;
      });
    },
    activated () {
      let param = {
        msgTypeCode: this.$route.params.type
      };
      let paramer = Object.assign(param, constant.pager);
      api.informs(paramer).then(res => {
        this.informs = res;
      });
    },
    methods: {
      checkDetail (type, id) {
        if (type === '1') {
          this.pager = '/sysInfo/' + id;
        }
        this.$router.push({path: this.pager, query: {type: this.$route.params}});
      }
    }
  }
  ;
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";
  .timeline{
    background-color: #d9d9d9;
    color: #666;
    padding: px2rem(10px) px2rem(30px);
    border-radius: 6px;
  }
  .info-content {
    $info-padding: 24px;
    $info-text-margin: 30px;

    margin: px2rem($info-text-margin);
    border-radius: 3px;

    .info-header {
      font-size: px2rem(32px);
      text-align: left;
      color: #333;
      padding: px2rem($info-text-margin) px2rem($info-padding);
      i {
        float: left;
        font-size: px2rem(48px);
        margin-right: px2rem(12px);
        color: red;
        vertical-align: middle;
      }
    }
    .info-text {
      text-align: left;
      margin: 0 px2rem($info-padding);
      padding: 0 px2rem($info-padding) px2rem($info-text-margin)  px2rem(70px);
      color: #888;
    }
    .info-footer {
      border-top: 1px solid #eaeaea;
      margin: 0 px2rem($info-padding);
      padding: px2rem($info-padding) px2rem($info-padding);
      color: #888;
    }
    .info-inner {
      display: block;
      margin-left: px2rem(70px);
    }
  }
</style>
